* {
  touch-action: pan-y;
  tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background-color: #FFF;
  overflow: hidden;
}

html, body {
  height: 100%;
  user-select: none;
}

body {
  background-color: #000000;
}

.scrollbar {
}

.scrollbar .scrollbar-cnt {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.scrollbar .scrollbar-cnt::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  padding: 0 3px;
  background-color: transparent;
  border-radius: 14px;
}

.scrollbar .scrollbar-cnt::-webkit-scrollbar-track {
  width: 8px;
  border-radius: 14px;
  background-color: transparent;
}

.scrollbar .scrollbar-cnt::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  width: 8px;
  height: 8px;
  border-radius: 8px;
}

.scrollbar .scrollbar-after {
  display: block;
  height: calc(100% + 6px);
  width: 14px;
  background-color: #FFFFFF;
  border-radius: 14px;
  right: 0;
  left: auto;
  top: 0;
  transform: matrix(1, 0, 0, 1, 3, -3);
}

#main {
  z-index: 9999;
}

.cnt {
  width: 1920px;
  height: 1080px;
  position: relative;
  transform-origin: 0 0;
  background: url("../source/images/main-bg.jpg") 50% 50% no-repeat;
  background-size: contain;
}

.cnt-mn {
  width: 100%;
  height: 100%;
}

.view * {
  position: absolute;
  top: 0;
  left: 0;
}

.title {
  position: absolute;
  z-index: 1000;
}
.audio-button,
.audio-button-2 {
  cursor: pointer;
}

.tab-cell {
  position: absolute;
  width: 226px;
  height: 144px;
  z-index: 1100;
  opacity: 0;
  cursor: pointer;
}

.tab-cell.active {
  opacity: 1;
}

.video-warp {
  position: absolute;
}


.video-warp video {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-warp .video-avatar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  cursor: pointer;
}

.video-warp .video-avatar.hidden {
  visibility: hidden;
}

.view {
  position: absolute;
  top: -1000px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1000;
}

.view.active {
  opacity: 1;
  top: 0;
  z-index: 1000;
}

.split-line-btn {
  position: absolute;
  cursor: pointer;
  width: 40px;
  height: 40px;
  z-index: 100;
}

.split-line-1-btn {

}

.split-line-2-btn {

}

.cnt-1 {
  position: absolute;
  z-index: 30;
}

.cnt-2 {
  position: absolute;
  z-index: 20;
}

.cnt-3 {
  position: absolute;
  z-index: 15;
}

.icon-button {
  cursor: pointer;
}

.icon-audio {
  background: url("../images/icon-audio.png") 0 0 no-repeat;
  position: absolute;
  width: 45px;
  height: 44px;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 1200;
}

.icon-audio.playing {
  background-position: 0 -44px;
}

.icon-shi {
  background-image: url("../images/icon-shi.png");
  position: absolute;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: block;
  z-index: 1210;
}

.icon-shi-close {
  position: absolute;
  cursor: pointer;
  display: block;
  width: 35px;
  height: 35px;
  top: 0;
  right: 0;
  left: auto;
}

.shi {
  position: absolute;
  z-index: -1000;
  visibility: hidden;
  top: 0;
  left: 0;
  cursor: default;
}

.shi.active {
  z-index: 1220;
  visibility: visible;
}

.shi img {
  position: relative;
}

.view-4-img-cell {
  position: absolute;
  left: 522px;
  top: 254px;
  z-index: -1000;
  visibility: hidden;
}

.view-4-img-cell.active {
  z-index: 1000;
  visibility: visible;
}

.view4 .page-cell {
  position: absolute;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, -522, -254);
}

.title-b {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  z-index: 1000;
  background: 0 0 no-repeat;
  pointer-events: none;
}

.shi-ju-warp,
.shi-ju {
  position: absolute;
  width: 0;
  height: 47px;
  z-index: 1000;
  background: 0 0 no-repeat;
}

.shi-ju {
  pointer-events: none;
}

.shi-ju-warp {
  width: 368px;
  cursor: pointer;
}

.shi-ju-jie-shi {
  position: absolute;
  cursor: pointer;
  z-index: 1000;
}

.goto-view {
  cursor: pointer;
  z-index: 1100;
}

.progress {
  position: absolute;
  z-index: -1000;
  background: url("../images/progress.gif") 50% 50% no-repeat;
  background-size: cover;
  width: 1920px;
  height: 1080px;
  top: -10000px;
  left: 0;
}

.progress.active {
  display: block;
  z-index: 99999;
  top: 0;
  left: 0;
}
